<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>移动端图标列表</title>
		<style type="text/css">
			body {
				height: 100vh;
				margin: 0;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}
			header {
				height: 8vh;
				background-color: #FF6700;
			}
			main {
				/* height: 84vh; */
				flex: 1;
				background-color: #E5E5E5;
			}
			.icon_lists {
				height: 30vh;
				display: flex;
				background-color: #fff;
				flex-wrap: wrap;
				align-content: space-around;
			} 
			.icon_lists>.iconbox {
				width: 20vw;
			/* 	height: 8vh; */
				/* background-color: #0086B3; */
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
				font-size: 28px;
				
			}
			.iconbox>img {
				width: 80px;
				height: 80px;
				margin: 40px 0;
			}
			footer {
				height: 8vh;
				background-color: #CCCCCC;
				display: flex;
			}
			footer>div {
				font-size: 28px;
				width: 10vw;
				display: flex;
				justify-content: center;
				align-items: center;
				color: white;
				flex-grow: 1;
			}
			footer div:first-child {
				background-color: pink;
				flex-grow: 0;
			}
			footer div:nth-child(2) {
				background-color: slategray;
			}
			footer div:nth-child(3) {
				background-color: lightblue;
			}
			footer div:nth-child(4) {
				background-color: goldenrod;
				flex-grow: 3;
			}
			footer div:nth-child(5) {
				background-color: blueviolet;
			}
		</style>
	</head>
	<body>
		<header>
			
		</header>
		<main>
			
			<div class="icon_lists">
				<div class="iconbox"><img src="1.png" alt=""><span>标题说明</span></div>
				<div class="iconbox"><img src="2.png" alt=""><span>标题说明</span></div>
				<div class="iconbox"><img src="3.png" alt=""><span>标题说明</span></div>
				<div class="iconbox"><img src="4.png" alt=""><span>标题说明</span></div>
				<div class="iconbox"><img src="5.png" alt=""><span>标题说明</span></div>
				<div class="iconbox"><img src="6.png" alt=""><span>标题说明</span></div>
				<div class="iconbox"><img src="7.png" alt=""><span>标题说明</span></div>
				<div class="iconbox"><img src="8.png" alt=""><span>标题说明</span></div>
				<div class="iconbox"><img src="9.png" alt=""><span>标题说明</span></div>
				<div class="iconbox"><img src="10.png" alt=""><span>标题说明</span></div>
			</div>
		</main>
		<footer>
			<div>首页</div>
			<div>通讯录</div>
			<div>朋友圈</div>
			<div>软件教程</div>
			<div>我的</div>
		</footer>
	</body>
</html>
